<template>
  <ul class="nav-tab">
    <li v-for="(item, index) in data" :key="index" 
    :class="{'active': index == activeIndex}" @click="turn(index)">
      <div class="icon" :style="{'backgroundImage': 'url(' + bg + ')'}"></div>
      <p>{{item.name}}</p>
    </li>
  </ul>
</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {
    }
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    activeIndex: {
      type: Number,
      default: 0
    },
    bg: {
      type: String,
      default: ''
    }
  },
  methods: {
    turn(index) {
      this.$emit('turn', index)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .nav-tab{
    display: flex;
    background-color: #fff;
    z-index: 990;
    li{
      flex: 1;
      font-size: 24px;
      text-align: center;
      color: #333333;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .icon {
        width: 59px;
        height: 59px;
        background-size:auto 118px;
        background-repeat: no-repeat;
        background-position: 0 0; 
      }
      &:nth-child(2){
        .icon{
          background-position: -56.5px 0; 
        }
      }
      &:nth-child(3){
        .icon{
          background-position: -110px 0; 
        }
      }
      &:nth-child(4){
        .icon{
          background-position: -165px 0; 
        }
      }
    }
    li.active{
      .icon{
        background-position-y: -54px; 
      }
    }
  }
</style>
